<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'
import { getShareInfo } from '@/pages/main/data'

onShareAppMessage(wxShare(true, getShareInfo))
onShareTimeline(wxShare(false, getShareInfo))
onAddToFavorites(wxCollect())
// #endif

import ShareMask from './share-mask/index.vue'

import { imagePath } from '@/libs/file-utils'
import { needsId } from '@/pages/main/data'
import { editFriend } from '../list/data'

const img_bg = imagePath('community/friend/invite/bg.jpg')
const img_logo = imagePath('community/friend/invite/logo.png')
const box_bg = imagePath('community/friend/invite/box-bg.png')
const btn_menu = imagePath('community/friend/invite/btn-menu.png')
const btn_history = imagePath('community/friend/invite/btn-history.png')
const icon_arrow = imagePath('community/friend/invite/icon-arrow.png')

const menuList = [
  {
    name: '邀请好友添加档案',
    key: 'invite',
    icon: imagePath('main/home/menu-share.png')
  },
  {
    name: '邀请好友合盘',
    key: 'share',
    icon: imagePath('main/home/menu-invite.png')
  },
  {
    name: '添加档案',
    key: 'add',
    icon: imagePath('main/home/menu-add.png')
  },
]

const clickMenu = (item: any) => {
  item.key === 'add' && editFriend()
}

const toList = () => uni.navigateTo({ url: '/pages/community/friend/list/index' })
</script>

<template>
  <PageWrapper
    name="community-friend-invite"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div
      class="box"
      :style="{ backgroundImage: box_bg }"
    >
      <div
        class="logo"
        :style="{ backgroundImage: img_logo }"
      ></div>

      <div
        v-for="(item, idx) in menuList"
        :key="idx"
        class="item"
        :style="{ backgroundImage: btn_menu }"
        @click="clickMenu(item)"
      >
        <div class="small"></div>
        <div
          class="icon"
          :style="{ backgroundImage: item.icon }"
        ></div>
        <div class="name">{{ item.name }}</div>
        <div
          class="arrow"
          :style="{ backgroundImage: icon_arrow }"
        ></div>

        <!-- #ifdef MP -->
        <button
          v-if="item.key !== 'add'"
          class="invite"
          open-type="share"
          @click="needsId = item.key === 'invite'"
        ></button>
        <!-- #endif -->
      </div>
    </div>

    <div
      class="history"
      :style="{ backgroundImage: btn_history }"
      @click="toList"
    >选择合盘档案</div>

    <ShareMask />
  </PageWrapper>
</template>

<style lang="less" scoped>
.box {
  position: relative;
  width: 714rpx;
  height: 655rpx;

  margin: 44rpx auto;

  box-sizing: border-box;
  padding-top: 80rpx;

  .logo {
    position: absolute;
    bottom: -210rpx;
    right: -18rpx;

    width: 370rpx;
    height: 494rpx;

    pointer-events: none;
  }

  .item {
    position: relative;
    width: 628rpx;
    height: 123rpx;

    margin: 0 auto 20rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rpx;

    .small {
      width: 20rpx;
      height: 20rpx;

      border-radius: 50%;
      background-color: #80413C;
    }

    .icon {
      width: 56rpx;
      height: 56rpx;

      border-radius: 10rpx;
    }

    .name {
      width: 330rpx;

      color: #7A3C36;
      font-size: 40rpx;
      line-height: 58rpx;
    }

    .arrow {
      width: 48rpx;
      height: 48rpx;
    }

    .invite {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      opacity: 0;
    }
  }
}

.history {
  position: fixed;
  bottom: 160rpx;
  left: 50%;
  transform: translateX(-50%);

  width: 556rpx;
  height: 130rpx;

  color: #7A3C36;
  font-size: 48rpx;
  line-height: 128rpx;
  text-align: center;
}
</style>